<script setup lang="ts">
import { onMounted, ref } from "vue";
import { string } from "vue-types";
import { getMenuTree } from "@/views/domain/admin/api/sysMenu";

const modelValue = defineModel({ type: string });
const emit = defineEmits(["change"]);
const menuTreeData = ref([]);

const loadMenuTree = async () => {
  const { data } = await getMenuTree({ pageNum: 1, pageSize: 1000 } as any);
  menuTreeData.value = [
    {
      title: "根节点",
      menuId: "0",
      children: data
    }
  ];
};

onMounted(() => {
  loadMenuTree();
});
</script>

<template>
  <el-tree-select
    v-model="modelValue"
    :data="menuTreeData"
    :check-strictly="true"
    :props="{ label: 'title', value: 'menuId' }"
    @change="value => emit('change', value)"
  />
</template>
<style lang="scss" scoped></style>
